<template>
    <div>
        <!-- 面包屑 -->
        <el-bread></el-bread>
        <!-- 添加按钮 -->
        <el-button class='btn' @click='add' type="primary" plain size="small">添加</el-button>
        <!-- 列表 -->
        <v-list @edit="edit"></v-list>
        <!-- 弹框 -->
        <v-dialog :dialogInfo="dialogInfo" @cancel="cancel" ref="dialogInfo"></v-dialog>
    </div>
</template>

<script>
import vList from './list.vue'
import vDialog from './dialog.vue'
export default {
    data() {
        return {
            dialogInfo: {
                isShow: false,//用于控制子组件弹框的显示隐藏
                isAdd: true,//是否是添加
            }
        };
    },
    components: {
        vList,
        vDialog
    },
    methods:{
         add() {
            this.dialogInfo.isShow = true,
                this.dialogInfo.isAdd = true
        },
        cancel(e){
             this.dialogInfo.isShow = e
        },
        edit(e){
            this.dialogInfo.isShow = true,
            this.dialogInfo.isAdd = false,
            this.$refs.dialogInfo.lookup(e)
        }
    }

};
</script>

<style scoped>
.btn{
      margin: 10px 5px;
}
</style>
